<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .circle{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: pink;
      position:absolute;
      top: 100px;
      left: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="circle" id="circle"></div>
  </div>
  <script>
    /**
     * (1)指定动画总时长
     * (2)指定动画步长
     * */
    const circle = document.getElementById("circle");

    const duration = 2000; // 动画时长（毫秒）
    const step = 2;

    const startX = 0;      // 起始位置
    const endX = window.innerWidth - 60; // 终点位置（减去圆形宽度）
    let startTime;
    
    //(1)指定动画总时长
    function animate(timestamp) {
      if (!startTime) startTime = timestamp;
      const progress = Math.min((timestamp - startTime) / duration, 1); // 进度（0~1）

      // 计算当前X位置（线性插值）
      const currentX = startX + (endX - startX) * progress;
      circle.style.left = `${currentX}px`;

      // 如果动画未结束，继续下一帧
      if (progress < 1) {
        requestAnimationFrame(animate);
      }
    }
    //(2)指定动画步长
    let position = 0
    function animate2() {
      position += step;
      circle.style.left = `${position}px`
      if (position > endX) {
        position = 0; //循环滑动
      }
      requestAnimationFrame(animate2);
    }

    // 启动动画
    // requestAnimationFrame(animate);
    requestAnimationFrame(animate2);
  </script>
</body>
</html>